<template>
	<view class="w100p common_header" :style="{background: backgroundColor, color: color}">
		<view class="back_btn" @click="goback" v-if="isBack">
			<uni-icons type="left" size="40rpx" :color="color"></uni-icons>
		</view>
		<text class="w100p header_title"> {{ title }} </text>
		<view class="header_right" v-if="isRight">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: "",
			},
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
			color: {
				type: String,
				default: '#333'
			},
			isBack: {
				type: Boolean,
				default: true,
			},
			isRight: {
				type: Boolean,
				default: false,
			}
		},
		watch: {
			value(val) {
				this.modal = val
			},
		},
		data() {
			return {
				modal: false,
			}
		},
		mounted() {},
		methods: {
			confirm(e) {
				// this.$emit('change', result)
			},
			goback() {
				this.$emit("goback")
			},
		}
	}
</script>

<style lang="less" scoped>
	.common_header {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.header_title {
			flex: none;
			font-size: 34rpx;
			line-height: 1.2;
			font-weight: 600;
		}

		.back_btn {
			position: absolute;
			z-index: 2;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			// display: inline-flex;
			// flex-direction: column;
			// align-items: center;
			// justify-content: center;
			padding: 0 40rpx;
			box-sizing: border-box;

			.goback_img {
				width: 20rpx;
			}
		}

		.header_right {
			position: absolute;
			right: 0;
			z-index: 2;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			padding: 0 40rpx;
			box-sizing: border-box;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>